<template>
    <div class="search">
        <p>
            <input type="text" placeholder="请输入城市名" v-model="txt">
            <span @click="hiddenList" v-show="listBool">x</span>
        </p>
        <div class="search-list" v-show="listBool">
            <ul>
                <li v-for="(item,key) in searchList" :key="key" @click="selectList(item.name)">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    let that

    export default {
        name: "search",
        props: {
            cityList: Object
        },
        data() {
            return {
                txt: "",
                searchList: [],
                timer: null,
                listBool: false,
                closeWatch:false
            }
        },
        methods: {
            getSearchList() {
                that = this
                if (this.txt) {
                    document.querySelector(".city").classList.add("absolute")
                    this.listBool = true
                    this.searchList = []
                    for (var key in that.cityList) {
                        that.cityList[key].forEach((item) => {
                            if (item.name.toString().indexOf(that.txt) > -1 || item.spell.toString().indexOf(that.txt) > -1) {
                                that.searchList.push(item)
                            }
                        })
                    }
                } else {
                    this.listBool = false
                    document.querySelector(".city").classList.remove("absolute")
                }
                if (this.searchList.length === 0) {
                    this.searchList = [{name: "没有更多", spell: ""}]
                }
                this.$nextTick(() => {
                    this.getListHeight()
                })

            },
            hiddenList(){
                this.txt=""
            },
            getListHeight() {
                const listHeight = parseInt(getComputedStyle(document.querySelector(".search-list")).height)
                const ulHeight = parseInt(getComputedStyle(document.querySelector(".search-list>ul")).height)
                const fixedHeight = listHeight < ulHeight ? "auto" : "hidden";
                document.querySelector(".search-list").style.overflow = fixedHeight
            },
            selectList(city){
                this.listBool = false
                document.querySelector(".city").classList.remove("absolute")
                this.closeWatch=!this.closeWatch
                this.txt=""
                this.$emit('click',city)
            }
        },
        watch: {
            txt() {
                if(!this.closeWatch){
                    that = this
                    if (this.timer) {
                        clearTimeout(this.timer)
                    }
                    this.timer = setTimeout(function () {
                        that.getSearchList()
                    }, 100)
                }else{
                    this.closeWatch=!this.closeWatch
                }
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "~css/varibles.scss";

    .search {
        > p {
            padding: .12rem;
            background-color: $bgcolor;

            input {
                text-align: center;
                width: 100%;
                border-radius: .05rem;
                line-height: .42rem;
                padding: 0 .08rem;
                box-sizing: border-box;
            }
            >span{
                position: absolute;
                padding: 0 .12rem;
                border-radius: .05rem;
                right:.12rem;
                line-height:.4rem;
                background-color: #faf6f6;
            }
        }

        .search-list {
            position: fixed;
            overflow: hidden;
            top: 1.58rem;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: $bgcolor-p;
            z-index: 3;

            ul {
                li {
                    margin: 0 .2rem;
                    padding: .16rem .24rem;
                    border-bottom: 1px solid #ececec;
                }
            }
        }
    }

</style>
